<script src="@/js/index/index.js"></script>

<template>

  <div id="app" class="index">

    <!-- 主页 -->
    <div class="home">
      <div class="margins">
        <div class="left">
          <b class="title">
            <Icon type="md-ionic" />
            重寻先人智慧&nbsp;&nbsp;传统文化探索
          </b>
          <div class="content">
            中华传统文化又称中国文化、华夏文化、国学等，随着黄河生生不息，随着长江源远流长。
            <br /><br />
            中华传统文化是中华文明的智慧结晶和精华所在，是中华民族的根与魂、是自强不息、发展壮大的强大精神力量，同时塑造了中华文明的连续性、创新性、统一性、包容性与和平性 ...
          </div>
        </div>
        <div class="right">
          <img src="@/assets/pic/index/index.png" />
        </div>
      </div>
    </div>

    <!-- 文化探索 -->
    <div class="wenhua">
      <div class="margins">
        <div class="title">
          文化探索
        </div>
        <div class="title2">
          阴阳、五行、天干、地支、八卦 ...
        </div>
        <div class="content">
          <el-row :gutter="15">
            <el-col :span="6" v-for="item in wenhua" :key="item">
              <router-link :to="item.link">
                <el-card style="max-width:480px;" shadow="hover" class="card">
                  <template #header>
                    <div class="center header">
                      {{ item.name }}
                    </div>
                  </template>
                  <img :src="item.img" />
                  <div class="more">
                    <span>
                      了解更多
                      <Icon type="ios-arrow-dropright" />
                    </span>
                  </div>
                </el-card>
              </router-link>

            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 辅助工具 -->
    <div class="gongju">
      <div class="margins">
        <div class="title">
          辅助工具
        </div>
        <div class="title2">
          辅助工具
        </div>
        <div class="content">
          <div class="paipan" v-for="item in gongju" :key="item">
            <div class="left">
              <div class="introduce">
                {{ item.introduce }}
              </div>
              <div class="use-button">
                <router-link :to="item.link">
                  <button>开始使用</button>
                </router-link>
              </div>
            </div>
            <div class="right">
              <router-link :to="item.link">
                <img :src="item.img" />
              </router-link>
            </div>
            <div>&nbsp;</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 网站概况 -->
    <div class="gaikuang">
      <div class="margins">
        <div class="title">
          网站概况
        </div>
        <div class="title2">
          网站概况
        </div>
        <div class="echarts" id="main"></div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less" src="@/css/index/index.scss"></style>
